<template>
    <div class="page">
        <div class="navTitle">
            <Breadcrumb :route="routes" />
        </div>
        <div class="wb-container">
            <div class="mian-content">
                <el-table v-loading="loading" element-loading-text="加载数据..." :data="logData"
                    style="width: 100%;margin-bottom: 20px;height: 100%;" size="small" border
                    :header-cell-style="{ background: '#3CB731', color: '#fff', fontSize: '14px', height: '40px', letterSpacing: '2px' }">
                    <template #empty>
                        <el-empty description="暂无数据！" />
                    </template>
                    <el-table-column prop="admin_user_id" label="用户ID" width="180" align=center />
                    <el-table-column prop="admin_user.account" label="操作员" width="180" align=center />
                    <el-table-column prop="name" label="操作" align=center>
                        <template #default="{ row }">
                            <div class="operate">{{ row.name }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ip" label="用户IP" align=center />
                    <el-table-column prop="created_at" label="操作时间" align=center />
                </el-table>
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                        :page-sizes="[15, 20, 25, 30]" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import Breadcrumb from '@/components/nav-header'
import { logList } from '../../api/OperationLog'


const route = useRoute()
const routes = ref()
const logData = ref()
const total = ref(0)
let OperationLogData = ref(null)
const currentPage = ref(1)
const pageSize = ref(15)
const small = ref(true)
const background = ref(true)
const disabled = ref(false)
const loading = ref(true)

onMounted(() => {
    routes.value = route.matched
    getLogList()
})
const getLogList = async () => {
    const res = await logList({
        limit: pageSize.value,
        page: currentPage.value
    }).then(res => {
        const { code, data } = res
        loading.value = false
        if (code == 200) {
            OperationLogData.value = data
            logData.value = data.data
            total.value = data.total
        }
    }).catch((err) => {
        loading.value = false
    })
}
const handleSizeChange = (val) => {
    pageSize.value = val
    getLogList()

}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getLogList()
}
</script>

<style lang="less" scoped>
.table-page {
    padding: 20px 30px;
    background-color: #fff;
}

.demo-pagination-block {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.operate {
    margin: 10px;
}
</style>
